<template>
  <div class="fenxiaoshangguanli">
    <div v-if="!shoujiban">
      <left></left>
      <div class="right">
        <div
          style="
            height: 91px;
            border-bottom: 1px solid rgb(227, 232, 241);
            width: 100%;
            padding: 0 30px;
          "
          class="flexbc"
        >
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>分销商管理</el-breadcrumb-item>
          </el-breadcrumb>
          <top></top>
        </div>

        <div
          style="
            padding: 37px 30px 0 30px;
            height: calc(100vh - 91px);
            overflow: auto;
          "
        >
          <!-- <div class="flexbc">
            <div class="flex" style="margin-bottom: 30px;">
              <div class="flexcc " style="cursor: pointer;"  @click="changestatus('0')" :class="search.all == '0'?'sxjact':'sxj'"  >直接分销商</div>
              <div class="flexcc " style="cursor: pointer;"  @click="changestatus('1')" :class="search.all == '1'?'sxjact':'sxj'">全部分销商</div>
            </div>
            <div style="cursor: pointer; color: #004AFF;" @click="xiazaiyun">下载佣金计算详解</div>
          </div>-->

          <!-- tab -->
          <div style="margin-bottom: 3rem">
            <div class="t_choose_tab_box">
              <div
                @click="changestatus('0')"
                :class="{ t_tab_title_lei: search.all == 0 }"
                class="t_tab_title"
              >
                直接分销商
                <div class="t_under_line" :class="{ t_under_line_lei: search.all == 0 }"></div>
              </div>

              <div
                @click="changestatus('1')"
                :class="{ t_tab_title_lei: search.all == 1 }"
                class="t_tab_title"
                style="
                  margin-left: 40px;
                  margin-right: 70px;
                  position: relative;
                "
              >
                全部分销商
                <div class="t_under_line" :class="{ t_under_line_lei: search.all == 1 }"></div>
              </div>
            </div>
          </div>

          <div
            v-if="search.all == '0'"
            class="flexc"
            style="font-size: 16px; font-weight: bold; margin-bottom: 20px"
          >
            <div>
              <img src="../../../static/img/xitong3.png" style="width: 22px; margin-right: 10px" />
            </div>
            <div>发展分销商</div>
          </div>
          <div
            v-if="search.all == '0'"

            style="

              background: rgb(255, 255, 255);
              border-radius: 20px;
              padding: 30px;

            "
          >
            <div class="flex" style="align-items: center; height: 100%; margin-bottom: 25px;">
              <div
                style="
                  color: #acacac;
                  font-size: 14px;
                  width: 200px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                "
              >{{ copyurl }}</div>
              <el-button
                @click="copy(copyurl)"
                style="margin-left: 40px; height: 30px; padding: 0 15px"
                type="primary"
                round
              >复制邀请链接</el-button>
            </div>

            <div style="color: rgb(2, 12, 29); font-size: 16px; font-weight: bold;">默认初始佣金设置</div>
            <div class="flexc" style="padding: 25px 0;">

              <div class="flexc moneybox">
                <el-radio v-model="commission.user_fee_type" :label="1">按金额抽成</el-radio>
                <el-input v-model="commission.user_fee_amount" style="width: 200px; margin-right: 30px" placeholder="请输入"></el-input>
              </div>
              <div class="flexc moneybox">
                <el-radio v-model="commission.user_fee_type" :label="0">按比例抽成</el-radio>
                <el-input v-model="commission.user_fee_percent" style="width: 200px; margin-right: 30px" placeholder="请输入"></el-input>
              </div>

              <el-button  @click="setmoren" type="primary" round>保存</el-button>

            </div>
            <div style="color: rgb(148, 148, 149); font-size: 12px;">新加入分销系统的用户将会使用该比例或金额作为其初始抽成设置</div>
          </div>
          <div class="flexc" style="font-size: 16px; font-weight: bold; margin-bottom: 20px; margin-top: 20px;">
            <div>
              <img src="../../../static/img/xitong3.png" style="width: 22px; margin-right: 10px" />
            </div>
            <div>分销商列表</div>
          </div>
          <div
            class="fenxiaoshang_container"
            style="
              height: 160px;
              background: rgb(255, 255, 255);
              border-radius: 20px;
              padding: 20px;
            "
          >
            <div class="flex">
              <div>
                <div style="margin-bottom: 10px">分销商</div>
                <div class="moneybox">
                  <el-input
                    v-model="search.name"
                    style="width: 200px; margin-right: 30px"
                    placeholder="请输入"
                  ></el-input>
                </div>
              </div>
              <div>
                <div style="margin-bottom: 10px">联系电话</div>
                <div class="moneybox">
                  <el-input
                    v-model="search.mobile"
                    style="width: 200px; margin-right: 30px"
                    placeholder="请输入"
                  ></el-input>
                </div>
              </div>
              <div v-if="search.all == 1">
                <div style="margin-bottom: 10px">分销层级</div>
                <el-select
                  v-model="search.level"
                  clearable
                  style="width: 200px; margin-right: 30px"
                  placeholder="请选择分销层级"
                >
                  <el-option label="1级分销商" :value="1"></el-option>
                  <el-option label="2级分销商" :value="2"></el-option>
                  <el-option label="3级分销商" :value="3"></el-option>
                  <el-option label="4级分销商" :value="4"></el-option>
                </el-select>
              </div>
              <div>
                <div style="margin-bottom: 10px">省市区</div>
                <div class="moneybox">
                  <el-input
                    v-model="search.region"
                    style="width: 200px; margin-right: 30px"
                    placeholder="请输入"
                  ></el-input>
                </div>
              </div>
              <div style="margin-right: 30px">
                <div style="margin-bottom: 10px">&nbsp;</div>
                <div>
                  <el-button @click="searchbtn" type="primary" round icon="el-icon-search">检索</el-button>
                </div>
              </div>
            </div>
            <div>
              <div class="accord_container" v-if="search.all == 0">
                签署协议
                <el-switch
                  v-model="sign_switch"
                  active-color="#005AFF"
                  @change="switchChange"
                  inactive-color="#ccc"
                ></el-switch>
                <div style="color:#005AFF;font-size:14px;cursor: pointer;" @click="signClick">配置</div>
                <div style="color:#666666;font-size:14px">线上协议请在此处配置</div>
                <el-tooltip content="开启后，未签约用户将无法提现，协议内容请自行储备" placement="top">
                  <div class="tooltip_style">?</div>
                </el-tooltip>
              </div>
            </div>
          </div>

          <div style="margin-top: 20px">
            <el-table :data="list" style="width: 100%" @sort-change="handleSortChange">
              <el-table-column align="center" width="160" prop="notes_name" label="备注名" fixed>
                <template slot-scope="scope">
                  <div v-if="search.all == '0'">
                    {{ scope.row.notes_name }}
                    <i
                      class="el-icon-edit"
                      @click="openeditname(scope.row)"
                      style="
                        color: rgb(0, 90, 255);
                        margin-left: 20px;
                        cursor: pointer;
                      "
                    ></i>
                  </div>
                  <div v-if="search.all == '1'">
                    {{ scope.row.own_notes_name }}
                    <i
                      class="el-icon-edit"
                      @click="openeditname(scope.row)"
                      style="
                        color: rgb(0, 90, 255);
                        margin-left: 20px;
                        cursor: pointer;
                      "
                    ></i>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                width="180"
                v-if="search.all == '1'"
                key="parent_name"
                align="center"
                prop="parent_name"
                label="上游供应商名字"
              ></el-table-column>
              <el-table-column width="150" align="center" prop="name" label="分销商"></el-table-column>

              <el-table-column
                align="center"
                prop="already_commission"
                label="已提现金额"
                sortable="custom"
                width="120px"
              ></el-table-column>
              <el-table-column
                align="center"
                prop="not_commission"
                label="未提现金额"
                sortable="custom"
                width="120px"
              ></el-table-column>
              <el-table-column
                align="center"
                prop="total_commission"
                label="总金额"
                sortable="custom"
                width="100px"
              ></el-table-column>

              <el-table-column
                v-if="search.all == '0'"
                key="exp"
                align="center"
                prop="exp"
                label="等级值"
              ></el-table-column>
              <el-table-column
                v-if="search.all == '0'"
                key="level"
                align="center"
                prop="level"
                label="等级"
              ></el-table-column>
              <el-table-column align="center" prop="level_name" label="分销层级"></el-table-column>
              <el-table-column align="center" label="所在地区">
                <template slot-scope="scope">
                  <div
                    v-if="
                      scope.row.province != '' &&
                      scope.row.city != '' &&
                      scope.row.district != ''
                    "
                  >
                    {{ scope.row.province }} {{ scope.row.city }}
                    {{ scope.row.district }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column width="160" align="center" prop="mobile" label="联系方式"></el-table-column>
              <el-table-column
                v-if="search.all == '1'"
                key="created_at"
                align="center"
                prop="created_at"
                label="注册时间"
                width="170px"
              ></el-table-column>
              <el-table-column
                v-if="search.all == '0'"
                key="bili"
                align="center"
                label="商品佣金比例"
                width="170px"
              >
                <template slot="header" slot-scope="scope">
                  <div class="flexcc">
                    <div>商品佣金比例</div>
                    <div>
                      <el-tooltip
                        class="item"
                        effect="dark"
                        content="针对分销商的个性化佣金设置，所有商品都会按照设置的佣金金额乘以该比例计算佣金，例：佣金100元，如果此处设置为120%，那么最终支付佣金120元，如果设置80%最终支付80元（修改后影响新订单，已有订单仍为订单创建时的金额计算）"
                        placement="top"
                      >
                        <i
                          class="el-icon-question"
                          style="
                            color: rgb(175, 179, 188);
                            margin-left: 20px;
                            cursor: pointer;
                            font-size: 25px;
                          "
                        ></i>
                      </el-tooltip>
                    </div>
                  </div>
                </template>
                <template slot-scope="scope">
                  <div class="flexcc">
                    <div v-if="scope.row.commission_type == 0">抽成比例：</div>
                    <div v-if="scope.row.commission_type == 0">{{ scope.row.commission_rate }}%</div>

                    <div v-if="scope.row.commission_type == 1">抽取金额：</div>
                    <div v-if="scope.row.commission_type == 1">{{ scope.row.commission_amount }}元</div>

                    <i
                      v-if="search.all == '0' && openswitch != 1"
                      class="el-icon-edit"
                      @click="yongjinkai(scope.row, 1)"
                      style="
                        color: rgb(0, 90, 255);
                        margin-left: 20px;
                        cursor: pointer;
                      "
                    ></i>
                  </div>
                </template>
              </el-table-column>

              <el-table-column
                v-if="search.all == '0'"
                key="choucheng"
                align="center"
                label="佣金抽成"
                width="200"
              >
                <template slot="header" slot-scope="scope">
                  <div class="flexcc">
                    <div>佣金抽成</div>
                    <div>
                      <el-tooltip
                        class="item"
                        effect="dark"
                        content="针对分销商的下级发展订单的个性化抽成比例设置，按照当前商品佣金金额的百分比抽取，例：佣金100元，如果此处设置为20%，其下游每发展一个订单上游获得20元，注：分销商仅从直接发展的分销商售卖订单中抽成，不会多层级抽取。"
                        placement="top"
                      >
                        <i
                          class="el-icon-question"
                          style="
                            color: rgb(175, 179, 188);
                            margin-left: 20px;
                            cursor: pointer;
                            font-size: 25px;
                          "
                        ></i>
                      </el-tooltip>
                    </div>
                  </div>
                </template>
                <template slot-scope="scope">
                  <div class="flexcc">
                    <div v-if="scope.row.user_fee_type == 0">抽成比例：</div>
                    <div v-if="scope.row.user_fee_type == 0">{{ scope.row.user_fee_percent }}%</div>

                    <div v-if="scope.row.user_fee_type == 1">抽成金额：</div>
                    <div v-if="scope.row.user_fee_type == 1">{{ scope.row.user_fee_amount }}元</div>

                    <!-- {{ scope.row.user_fee_percent }} % -->
                    <i
                      v-if="search.all == '0' && openswitch != 1 && is_qfx != 1"
                      class="el-icon-edit"
                      @click="yongjinkai(scope.row, 2)"
                      style="
                        color: rgb(0, 90, 255);
                        margin-left: 20px;
                        cursor: pointer;
                      "
                    ></i>
                  </div>
                </template>
              </el-table-column>

              <el-table-column align="center" label="备注信息">
                <template slot-scope="scope">
                  <div class="flexcc" v-if="search.all == '0'">
                    <el-tooltip
                      class="item"
                      effect="dark"
                      :content="scope.row.notes"
                      placement="top"
                    >
                      <div class="t_over_text">{{ scope.row.notes }}</div>
                    </el-tooltip>
                    <i
                      class="el-icon-edit"
                      @click="openeditnote(scope.row)"
                      style="
                        color: rgb(0, 90, 255);
                        margin-left: 20px;
                        cursor: pointer;
                      "
                    ></i>
                  </div>
                  <div class="flexcc" v-if="search.all == '1'">
                    <el-tooltip
                      class="item"
                      effect="dark"
                      :content="scope.row.own_notes"
                      placement="top"
                    >
                      <div class="t_over_text">{{ scope.row.own_notes }}</div>
                    </el-tooltip>
                    <i
                      class="el-icon-edit"
                      @click="openeditnote(scope.row)"
                      style="
                        color: rgb(0, 90, 255);
                        margin-left: 20px;
                        cursor: pointer;
                      "
                    ></i>
                  </div>
                </template>
              </el-table-column>
              <el-table-column align="center" label="是否签约" v-if="search.all == 0">
                <template slot-scope="scope">
                  <div
                    v-if="scope.row.is_sign == 1"
                    style="color: green; cursor: pointer;margin-right: 10px;"
                  >已签约</div>
                  <div
                    v-else
                    @click="upSign(scope.row)"
                    style="color: #ff0202; cursor: pointer;margin-right: 10px;"
                  >未签约</div>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="ok_count" label="操作" width="350" fixed="right">
                <template slot-scope="scope">
                  <div style="display: flex;justify-content: flex-start">
                    <div
                      v-if="search.all == '0'"
                      @click="
                        go('/fenxiaoshangguanli/dengjiguanli', scope.row.id)
                      "
                      style="color: rgb(0, 90, 255); cursor: pointer;margin-right: 10px;"
                    >等级值管理</div>
                    <div
                      v-if=" scope.row.status == 0"
                      @click="delbtn(scope.row, 1)"
                      style="color: rgb(0, 90, 255); cursor: pointer;margin-right: 10px;"
                    >停用</div>
                    <div
                      v-if=" scope.row.status == -10"
                      @click="delbtn(scope.row, 2)"
                      style="color: #ff0202; cursor: pointer;margin-right: 10px;"
                    >已停用</div>

                    <div
                      v-if="
                        search.all == '1' && scope.row.freeze_commission == 0
                      "
                      @click="dongjie(scope.row, 1)"
                      style="color: rgb(0, 90, 255); cursor: pointer;margin-right: 10px;"
                    >冻结提现</div>
                    <div
                      v-if="
                        search.all == '1' && scope.row.freeze_commission == 1
                      "
                      @click="dongjie(scope.row, 0)"
                      style="color: #ff0202; cursor: pointer;margin-right: 10px;"
                    >解冻提现</div>

                    <div
                      v-if="search.all == '1' && scope.row.freeze == '0'"
                      @click="coldbtn(scope.row, 1)"
                      style="color: rgb(0, 90, 255); cursor: pointer;margin-right: 10px;"
                    >冻结提单</div>
                    <div
                      v-if="search.all == '1' && scope.row.freeze == '1'"
                      @click="coldbtn(scope.row, 2)"
                      style="color: #ff0000; cursor: pointer;margin-right: 10px;"
                    >已冻结提单</div>
                    <div
                      v-if="search.all == '1'"
                      @click="chakanxinxi(scope.row)"
                      style="color: rgb(0, 90, 255); cursor: pointer;margin-right: 10px;"
                    >查看信息</div>
                    <div
                      v-if="search.all == '1'"
                      @click="resetCode(scope.row)"
                      style="color: red; cursor: pointer;margin-right: 10px;"
                    >重置密码</div>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <el-pagination
            style="text-align: right; padding: 20px"
            background
            layout="prev,pager,next,total,jumper"
            :page-size="search.page_size"
            @current-change="pagechange"
            :total="total"
          ></el-pagination>
          <!-- <footers></footers> -->
        </div>
      </div>
    </div>
    <!-- 重置密码弹窗 -->
    <el-dialog
      title="重置密码"
      :visible.sync="resetcodeShow"
      width="500px"
      :close-on-click-modal="false"
    >

    <el-input v-model="password" type="password" placeholder="请输入新密码"></el-input>

      <div style="text-align: right; margin-top: 20px">
        <el-button round @click="resetcodeShow = false">取 消</el-button>
        <el-button round type="primary" @click="sureResetCode">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="详细信息" :visible.sync="xiangxilog" :close-on-click-modal="false" width="630px">
      <div>
        <div class="flexc" style="margin-bottom: 20px">
          <div style="width: 120px; padding-right: 20px">登录账号名：</div>
          <div style="color: rgb(130, 130, 130)">{{ xiangxixinxi.name }}</div>
        </div>
        <div class="flexc" style="margin-bottom: 20px">
          <div style="width: 120px; padding-right: 20px">联系电话：</div>
          <div style="color: rgb(130, 130, 130)">{{ xiangxixinxi.mobile }}</div>
        </div>
        <div class="flexc" style="margin-bottom: 20px">
          <div style="width: 120px; padding-right: 20px">实名信息：</div>
          <div style="color: rgb(130, 130, 130)">
            <div class="flexc">
              <div style="margin-right: 20px">{{ xiangxixinxi.user_infos.ali_name }}</div>
              <div>{{ xiangxixinxi.user_infos.ali_idcard }}</div>
            </div>
            <div class="flexc">
              <div style="margin-right: 20px">{{ xiangxixinxi.user_infos.bank_name }}</div>
              <div>{{ xiangxixinxi.user_infos.bank_idcard }}</div>
            </div>
          </div>
        </div>
        <div class="flexc" style="margin-bottom: 20px">
          <div style="width: 120px; padding-right: 20px">分销链路:</div>
          <div style="color: rgb(130, 130, 130)">
            <div v-for="(item, index) in fenxiaolianlu" :key="index" style="float: left">
              <span v-if="index">></span>
              <span>{{ index + 1 }} {{ item.name }}</span>
            </div>
          </div>
        </div>
      </div>
      <div style="margin-top: 20px; text-align: center">
        <el-button type="primary" @click="xiangxilog = false">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 修改备注名 -->
    <el-dialog
      title="修改备注名"
      :visible.sync="isshowchangenotename"
      :close-on-click-modal="false"
      width="500px"
    >
      <el-input v-model="editnotename" placeholder="请输入备注名"></el-input>
      <div style="margin-top: 20px; text-align: center">
        <el-button @click="isshowchangenotename = false">取 消</el-button>
        <el-button type="primary" @click="editnamebtn">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 修改备注 -->
    <el-dialog
      title="修改备注"
      :visible.sync="isshowchangenotenote"
      :close-on-click-modal="false"
      width="500px"
    >
      <el-input v-model="editnotenote" type="textarea" :rows="3" placeholder="请输入备注"></el-input>
      <div style="margin-top: 20px; text-align: center">
        <el-button @click="isshowchangenotenote = false">取 消</el-button>
        <el-button type="primary" @click="editnotebtn">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog
      :title="yjorch == 1 ? '修改佣金比例' : '修改抽成比例'"
      :visible.sync="yongjinlog"
      :close-on-click-modal="false"
      width="500px"
    >
      <!-- 修改佣金比例 -->
      <div v-if="yjorch == 1" style="margin-bottom: 20px">
        <el-radio v-model="yongjinall.commission_type" :label="0">佣金比例</el-radio>
        <el-radio v-model="yongjinall.commission_type" :label="1">抽取金额</el-radio>
      </div>
      <div v-if="yjorch == 1 && yongjinall.commission_type == 0" style="position: relative">
        <div
          style="
            position: absolute;
            right: 20px;
            top: 0;
            z-index: 999;
            line-height: 41px;
          "
        >%</div>
        <el-input v-model="yongjinall.commission_rate" placeholder="请输入百分比数字,例80"></el-input>
      </div>
      <!-- 修改抽成金额 -->
      <div v-if="yjorch == 1 && yongjinall.commission_type == 1" style="position: relative">
        <!-- <div style="position: absolute; right: 20px; top: 0; z-index: 999; line-height: 41px;">%</div> -->
        <el-input v-model="yongjinall.commission_amount" placeholder="请输入金额"></el-input>
      </div>

      <!-- 抽成种类选择 -->
      <div v-if="yjorch == 2" style="margin-bottom: 20px">
        <el-radio @input="changeradio" v-model="typeradio" :label="0">比例</el-radio>
        <el-radio @input="changeradio" v-model="typeradio" :label="1">固定值</el-radio>
      </div>
      <!-- 修改抽成金额 -->
      <div v-if="yjorch == 2 && typeradio == 1" style="position: relative">
        <!-- <div style="position: absolute; right: 20px; top: 0; z-index: 999; line-height: 41px;">%</div> -->
        <el-input v-model="chouchengall.user_fee_amount" placeholder="请输入金额"></el-input>
      </div>
      <!-- 修改抽成比例 -->
      <div v-if="yjorch == 2 && typeradio == 0" style="position: relative">
        <div
          style="
            position: absolute;
            right: 20px;
            top: 0;
            z-index: 999;
            line-height: 41px;
          "
        >%</div>
        <el-input v-model="chouchengall.user_fee_percent" placeholder="请输入百分比数字,例80"></el-input>
      </div>

      <div style="margin-top: 20px; text-align: center">
        <el-button @click="yongjinlog = false">取 消</el-button>
        <!-- 修改佣金比例 -->
        <el-button type="primary" v-if="yjorch == 1" @click="yongjingo">确 定</el-button>
        <!-- 修改抽成比例 -->
        <el-button type="primary" v-if="yjorch == 2" @click="chouchenggo">{{upType?'强制保存':'确 定'}}</el-button>
      </div>
    </el-dialog>

    <!-- 手机版 -->

    <div
      v-if="shoujiban"
      style="
        color: rgb(2, 12, 29);
        font-size: 0.24rem;
        background: #f6f8fb;
      "
    >
      <div class="tabs_container">
        <div @click="choosetab('one')" :class="activeName === 'one' ? 'wares' : 'initial'">管理分销商</div>
        <div
          @click="choosetab('two')"
          :class="activeName === 'two' ? 'wares' : 'initial'"
          style="margin-left:30px"
        >发展分销商</div>
      </div>
       <div class="search_container" v-show="activeName === 'one'">
        <div class="input_outer">
            <div class="addUpto">共计{{list.length}}个</div>
            <el-input class="name_input" v-model="search.name" placeholder="请输入分销商"></el-input>
            <div @click="searchbtn" class="search_For">搜索</div>
        </div>
      </div>
      <div style="padding-left: 0.3rem;padding-right: 0.3rem;padding-bottom: 0.3rem;padding-top: 0.1rem" v-show="activeName === 'one'">
        <div class="list_inner" v-for="item in list" :key="item.id">
          <div class="item_notes">
            <div class="name_inner" v-if="item.notes_name">
             <div style="font-size:17px;">{{ item.name}}</div>
             <div style="margin:0 10px;">|</div>
             <div style="font-size:17px;">{{item.notes_name}}</div>
              <div class="level_val">{{item.level}}级</div>
              <div v-if="item.is_sign == 1" class="sign_val">已签约</div>
              <div v-else class="sign_val">未签约</div>
            </div>
            <div class="name_inner" v-else>
             <div style="font-size:17px;">{{ item.name}}</div>
              <div class="level_val">{{item.level}}级</div>
              <div v-if="item.is_sign == 1" class="sign_val">已签约</div>
              <div v-else class="sign_val">未签约</div>
            </div>
          </div>
           <div style="font-size:14px;margin:8px 0">{{item.mobile}}</div>
           <div class="money">
              <div>
                <div style="font-size:17px;color:#E62C3B;font-weight:bold;margin-bottom:4px">{{item.not_commission}}</div>
                <div style="color:#787D85;font-size:13px">未提现金额</div>
              </div>
              <div>
                <div style="font-size:17px;font-weight:bold;margin-bottom:4px">{{item.already_commission}}</div>
                <div style="color:#787D85;font-size:13px">已提现金额</div>
              </div>
           </div>
            <div class="mome">
               <div style="color:#787D85;display:flex;align-items:center;width:68%;">
                <div style="margin-right:5px;" class="limit" >
                   备注信息
                  <span>{{item.notes}}</span>
                </div>
               </div>
                <div class="ability">
                  <div class="stop" v-if="search.all == '0' && item.status == 0"
                  @click="stopBtn(item, 1)">停用</div>
                  <div class="stop" v-if="search.all == '0' && item.status == -10"
                  @click="stopBtn(item, 2)">已停</div>
                  <div class="remarks" @click="notesClick(item)">备注</div>
                </div>
            </div>
        </div>



       <div class="footer_tabs">
      <footerApp />
      </div>
      </div>
      <fenxiaomoshi  v-show="activeName === 'two'" :hide="true"/>
    </div>
    <!-- 冻结弹窗 -->
    <el-dialog
      :title="coldtype == 1 ? '冻结提单' : '取消冻结提单'"
      :visible.sync="isshowcold"
      width="500px"
      :close-on-click-modal="false"
    >
      <div v-if="coldtype == 1">冻结提单后，该分销商的订单将不会被生产，直到您解除冻结</div>
      <div v-if="coldtype == 2">取消冻结提单后，该分销商订单会重新流转，确定取消冻结么？</div>
      <div style="text-align: right; margin-top: 20px">
        <el-button round @click="isshowcold = false">取 消</el-button>
        <el-button round type="primary" @click="surecold">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="配置" :visible.sync="isModal" width="700px"  :close-on-click-modal="false">
      <div class="chuantu_container">
        <chuantu
        :heights="'300px'"
        :heights2="'300px'"
        :widths2="'300px'"
        :widths="'300px'"
        :imgs="sign_url"
        @getimg="getimg"
      ></chuantu>
      </div>
      <div style="margin-top: 100px;text-align:center">二维码将在提现弹窗中展示给用户用户扫码引导用户签约</div>

      <div style="text-align: right; margin-top: 20px">
        <el-button round @click="isModal = false">取 消</el-button>
        <el-button round type="primary" @click="onOK">确 定</el-button>
      </div>
    </el-dialog>
    <van-popup v-model="notesModal" position="bottom" :style="{ height: '35%',borderRadius:'15px 15px 0 0',padding:'15px'}" v-if="shoujiban">
       <div style="text-align:center;font-size:16px;">修改备注</div>
        <div class="note_textarea">
          <el-input v-model="editnotenote" type="textarea" :rows="3" placeholder="请输入"></el-input>
        </div>
        <div class="operate">
          <div class="cancellation" @click="notesModal = false">取消</div>
          <div class="besure" @click="suerClick">确定</div>
        </div>
    </van-popup>
  </div>
</template>

<script>
import left from "../left.vue";
import top from "../top.vue";
import footers from "../footer.vue";
import topandleft from "../topandleft.vue";
import chuantu from "@/components/chuantu.vue";
import footerApp from '../footerApp.vue';
import fenxiaomoshi from '../fenxiaoshangguanli/fenxiaomoshi'
export default {
  name: "fenxiaoshangguanli",
  components: {
    left,
    top,
    topandleft,
    footers,
    fenxiaomoshi,
    footerApp,
    chuantu
  },
  data() {
    return {
      notesModal:false,
      commission:{
        "user_fee_percent": 0,
        "user_fee_amount": 0,
        "user_fee_type": 0,
      },
      isModal: false,
      search: {
        page: 1,
        page_size: 20,
        name: "",
        mobile: "",
        all: "0",
        level: "",
        sort: ""
      },
      total: 0,
      upType: false,
      list: [],
      isshowchangenotename: false,
      editnotename: "",
      itemnotename: {},
      isshowchangenotenote: false,
      editnotenote: "",
      copyurl: "",
      yongjinlog: false,
      yongjinall: "",
      shoujiban: false,
      is_sign: false,
      yaoqing: {
        yaoqingma: 123
      },
      yjorch: "",
      chouchengall: "",
      shoujiban: false,
      coldtype: "",
      coldrow: {},
      isshowcold: false,
      resetcodeShow: false,
      typeradio: 1,
      openswitch: null,

      xiangxilog: false,
      xiangxixinxi: {
        user_infos: ""
      },
      is_qfx: "",
      fenxiaolianlu: [],
      passwordId: "", //重置密码id,
      password:"",
      sign_switch: false,
      sign_url: "",
      upSignUrl: "",
      activeName: "one",
    };
  },
  created() {
    //列表

    //获取邀请链接
    this.getsharelink();
    this.getinfo();
    this.getsign();
    this.getmoren();
  },
  mounted() {
    if (window.screen.width < 1080) {
      this.shoujiban = true;
      var h = document.documentElement.clientWidth / 7.5 + "px";
      document.documentElement.style.fontSize = h;
      this.search.page_size = 200;
    }

    this.getlist();
  },
  methods: {
    choosetab: function(val) {
      this.activeName = val;
    },
    getmoren:function(){
      axios
        .get("/own/user/fee/get")
        .then(response => {
          if (response.data.msg.code == 0) {

            this.commission = response.data.data

          } else {
            this.$message.error(response.data.msg.info);
          }
        });
    },
    setmoren:function(){
      axios
        .post("/own/user/fee/update",this.commission)
        .then(response => {
          if (response.data.msg.code == 0) {
            this.$message.success("设置成功");
          } else {
            this.$message.error(response.data.msg.info);
          }
        });
    },

    onOK() {
      axios
        .post("/own/sign/config", {
          sign_switch: this.sign_switch ? 1 : 0,
          sign_url: this.sign_url
        })
        .then(response => {
          if (response.data.msg.code == 0) {
            this.$message.success("签约二维码提交成功");
            this.isModal = false;
          } else {
            this.$message.error(response.data.msg.info);
          }
        });
    },
    async signClick() {
      await this.getsign();
      this.isModal = true;
    },
    getimg(url) {
      this.sign_url = url;
    },
    upSign(row) {
      this.$confirm("是否确定签约?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          axios
            .post("/own/user/sign/switch", {
              id: row.id,
              is_sign: 1
            })
            .then(response => {
              if (response.data.msg.code == 0) {
                this.$message({
                  type: "success",
                  message: "签约成功!"
                });
                this.getlist();
              } else {
                this.$message.error(response.data.msg.info);
              }
            });
        })
        .catch(() => {});
    },
    switchChange(value) {
      console.log("value", value);
      axios
        .post("/own/sign/config", {
          sign_switch: this.sign_switch ? 1 : 0,
          sign_url: this.sign_url
        })
        .then(response => {
          if (response.data.msg.code == 0) {
            if (value) {
              this.$message.success("协议签署开启成功");
            }
          } else {
            this.$message.error(response.data.msg.info);
          }
        });
    },
    getsign() {
      axios.get("/own/sign/get").then(response => {
        console.log("response--->", response);
        if (response.data.msg.code == 0) {
          const { sign_switch, sign_url } = response.data.data;
          this.sign_switch = sign_switch == 1;
          this.sign_url = sign_url;
        } else {
          this.$message.error(response.data.msg.info);
        }
      });
    },
    //冻结提现
    dongjie: function(item, val) {
      if (val == 1) {
        this.$confirm(
          "确定冻结该商家的提现按钮么？冻结后商家将不可提现直至解冻",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }
        ).then(() => {
          axios
            .post("/own/user/freeze/commission", {
              id: item.id,
              freeze_commission: val
            })
            .then(response => {
              if (response.data.msg.code == 0) {
                this.getlist();
              } else {
                this.$message.error(response.data.msg.info);
              }
            });
        });
      } else {
        axios
          .post("/own/user/freeze/commission", {
            id: item.id,
            freeze_commission: val
          })
          .then(response => {
            if (response.data.msg.code == 0) {
              this.getlist();
            } else {
              this.$message.error(response.data.msg.info);
            }
          });
      }
    },
    handleSortChange: function({ column, prop, order }) {
      console.log(column);
      console.log(prop);
      console.log(order);
      if (order == null) {
        this.search.sort = "";
      } else {
        if (prop == "already_commission" && order == "ascending") {
          this.search.sort = "already_asc";
        }
        if (prop == "already_commission" && order == "descending") {
          this.search.sort = "already_desc";
        }
        if (prop == "not_commission" && order == "ascending") {
          this.search.sort = "not_asc";
        }
        if (prop == "not_commission" && order == "descending") {
          this.search.sort = "not_desc";
        }
        if (prop == "total_commission" && order == "ascending") {
          this.search.sort = "total_asc";
        }
        if (prop == "total_commission" && order == "descending") {
          this.search.sort = "total_desc";
        }
      }

      this.getlist();
    },
    xiazaiyun: function() {
      const a = document.createElement("a");
      a.setAttribute("download", "佣金计算详解.pdf");
      a.setAttribute(
        "href",
        window.location.origin + "/hou/static/img/yongjin.pdf"
      );
      a.click();
    },
    chakanxinxi: function(item) {
      this.xiangxixinxi = item;
      console.log("this.xiangxixinxi", this.xiangxixinxi);
      this.xiangxilog = true;
      this.fenxiaolianlu = this.xiangxixinxi.relation_tree;
    },
    yongjinkai: function(item, type) {
      this.yjorch = type;
      if (type == 1) {
        //商品佣金比例
        this.yongjinall = {
          id: item.id,
          commission_rate: item.commission_rate,
          commission_type: item.commission_type,
          commission_amount: item.commission_amount
        };
      }
      if (type == 2) {
        this.typeradio = item.user_fee_type;
        this.chouchengall = {
          id: item.id,
          user_fee_amount: item.user_fee_amount,
          user_fee_percent: item.user_fee_percent,
          user_fee_type: item.user_fee_type
        };
        // if(item.user_fee_type==1){
        //   //佣金抽成固定值
        //   this.chouchengall={
        //     id:item.id,
        //     user_fee_amount:item.user_fee_amount,
        //     user_fee_type:1
        //   }
        // }else{
        //   //佣金抽成比例
        //   this.chouchengall={
        //     id:item.id,
        //     user_fee_percent:item.user_fee_percent,
        //     user_fee_type:0
        //   }
        // }
      }

      this.yongjinlog = true;
    },
    yongjingo: function() {
      var regu = /^(?!-)\d{1,3}$/;
      var re = new RegExp(regu);
      if (re.test(this.yongjinall.commission_rate)) {
        axios
          .post("/own/agent/useruser/update", {
            id: this.yongjinall.id,
            commission_rate: this.yongjinall.commission_rate * 1,
            commission_type: this.yongjinall.commission_type,
            commission_amount: this.yongjinall.commission_amount
          })
          .then(response => {
            if (response.data.msg.code == 0) {
              this.getlist();
              this.yongjinlog = false;
            } else {
              this.$message.error(response.data.msg.info);
            }
          });
      } else {
        this.$message.error("佣金比例不符合规则");
        return false;
      }
    },
    chouchenggo: function() {
      if (this.chouchengall.user_fee_type == 1) {
        //固定值
        axios
          .post("/own/agent/useruser/update", {
            id: this.chouchengall.id,
            user_fee_amount: this.chouchengall.user_fee_amount * 1,
            user_fee_type: this.chouchengall.user_fee_type
          })
          .then(response => {
            if (response.data.msg.code == 0) {
              this.getlist();
              this.yongjinlog = false;
            } else {
              this.$message.error(response.data.msg.info);
            }
          });
      } else {
        //比例
        var regu = /^\d{1,3}$/;
        var re = new RegExp(regu);
        if (re.test(this.chouchengall.user_fee_percent)) {
          let params = {
            id: this.chouchengall.id,
            user_fee_percent: this.chouchengall.user_fee_percent * 1,
            user_fee_type: this.chouchengall.user_fee_type
          };
          if (this.upType) {
            params.force_fee_percent = 1;
          }
          axios.post("/own/agent/useruser/update", params).then(response => {
            if (response.data.msg.code == 0) {
              this.getlist();
              this.yongjinlog = false;
            } else if (response.data.msg.code == 2) {
              this.upType = true;
              this.$message.error(response.data.msg.info);
            } else {
              this.$message.error(response.data.msg.info);
            }
          });
        } else {
          this.$message.error(
            "抽成比例不符合规则，只接受正数和整数且百分比不得超过3位数"
          );
          return false;
        }
      }
    },
    //列表
    getlist() {
      axios.get("/own/agent/list", { params: this.search }).then(response => {
        if (response.data.msg.code == 0) {
          if (response.data.data.data.length > 0) {
            response.data.data.data.forEach(item => {
              item.commission_rate = parseInt(item.commission_rate);
            });
          }

          this.list = response.data.data.data;
          this.total = response.data.data.total;
        } else {
          this.$message.error(response.data.msg.info);
        }
      });
    },
    //分页
    pagechange(val) {
      console.log(val);
      this.search.page = val;
      //列表
      this.getlist();
    },
    //搜索
    searchbtn() {
      this.search.page = 1;
      this.getlist();
    },
    stopBtn(item, type){
      if (type == 1) {
        //停用
        this.$confirm(
          "停用后，该分销商账户将不能登录，直到您解除停用",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
            customClass:"confirmContanienr"
          }
        )
          .then(() => {
            axios
              .post("/own/agent/delete", {
                user_id: item.id,
                status: -10
              })
              .then(response => {
                if (response.data.msg.code == 0) {
                  this.$message({
                    type: "success",
                    message: "操作成功!"
                  });
                  this.getlist();
                } else {
                  this.$message.error(response.data.msg.info);
                }
              });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消"
            });
          });
      } else if (type == 2) {
        //开启
        this.$confirm(
          "取消停用后，该分销商账户将可以登录，确认取消停用么？",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
            customClass:"confirmContanienr"
          }
        )
          .then(() => {
            axios
              .post("/own/agent/delete", {
                user_id: item.id,
                status: 0
              })
              .then(response => {
                if (response.data.msg.code == 0) {
                  this.$message({
                    type: "success",
                    message: "操作成功!"
                  });
                  this.getlist();
                } else {
                  this.$message.error(response.data.msg.info);
                }
              });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消"
            });
          });
      }
    },
    //删除
    delbtn(item, type) {
      if (type == 1) {
        //停用
        this.$confirm(
          "停用后，该分销商账户将不能登录，直到您解除停用",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",

          }
        )
          .then(() => {
            axios
              .post("/own/agent/delete", {
                user_id: item.id,
                status: -10
              })
              .then(response => {
                if (response.data.msg.code == 0) {
                  this.$message({
                    type: "success",
                    message: "操作成功!"
                  });
                  this.getlist();
                } else {
                  this.$message.error(response.data.msg.info);
                }
              });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消"
            });
          });
      } else if (type == 2) {
        //开启
        this.$confirm(
          "取消停用后，该分销商账户将可以登录，确认取消停用么？",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",

          }
        )
          .then(() => {
            axios
              .post("/own/agent/delete", {
                user_id: item.id,
                status: 0
              })
              .then(response => {
                if (response.data.msg.code == 0) {
                  this.$message({
                    type: "success",
                    message: "操作成功!"
                  });
                  this.getlist();
                } else {
                  this.$message.error(response.data.msg.info);
                }
              });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消"
            });
          });
      }
    },
    //打开修改备注名
    openeditname(item) {
      this.isshowchangenotename = true;

      if (this.search.all == 0) {
        this.editnotename = item.notes_name;
      } else {
        this.editnotename = item.own_notes_name;
      }
      this.itemnotename = item;
    },
    //提交修改备注名
    editnamebtn() {
      if (this.search.all == 0) {
        axios
          .post("/own/agent/notes-name/set", {
            user_id: this.itemnotename.id,
            notes_name: this.editnotename
          })
          .then(response => {
            if (response.data.msg.code == 0) {
              this.$message({
                type: "success",
                message: "操作成功!"
              });
              this.isshowchangenotename = false;
              this.getlist();
            } else {
              this.$message.error(response.data.msg.info);
            }
          });
      } else {
        axios
          .post("/own/agent/notes-name/set", {
            user_id: this.itemnotename.id,
            own_notes_name: this.editnotename
          })
          .then(response => {
            if (response.data.msg.code == 0) {
              this.$message({
                type: "success",
                message: "操作成功!"
              });
              this.isshowchangenotename = false;
              this.getlist();
            } else {
              this.$message.error(response.data.msg.info);
            }
          });
      }
    },
    notesClick(item){
      this.notesModal = true;
         if (this.search.all == 0) {
        this.editnotenote = item.notes;
      } else {
        this.editnotenote = item.own_notes;
      }
      this.itemnotename = item;
    },
    suerClick(){
            if (this.search.all == 0) {
        axios
          .post("/own/agent/notes/set", {
            user_id: this.itemnotename.id,
            notes: this.editnotenote
          })
          .then(response => {
            if (response.data.msg.code == 0) {
              this.$message({
                type: "success",
                message: "操作成功!"
              });
              this.notesModal = false;
              this.getlist();
            } else {
              this.$message.error(response.data.msg.info);
            }
          });
      } else {
        axios
          .post("/own/agent/notes/set", {
            user_id: this.itemnotename.id,
            own_notes: this.editnotenote
          })
          .then(response => {
            if (response.data.msg.code == 0) {
              this.$message({
                type: "success",
                message: "操作成功!"
              });
              this.notesModal = false;
              this.getlist();
            } else {
              this.$message.error(response.data.msg.info);
            }
          });
      }
    },
    //打开修改备注
    openeditnote(item) {
      this.isshowchangenotenote = true;

      if (this.search.all == 0) {
        this.editnotenote = item.notes;
      } else {
        this.editnotenote = item.own_notes;
      }
      this.itemnotename = item;
    },
    //提交修改备注
    editnotebtn() {
      if (this.search.all == 0) {
        axios
          .post("/own/agent/notes/set", {
            user_id: this.itemnotename.id,
            notes: this.editnotenote
          })
          .then(response => {
            if (response.data.msg.code == 0) {
              this.$message({
                type: "success",
                message: "操作成功!"
              });
              this.isshowchangenotenote = false;
              this.getlist();
            } else {
              this.$message.error(response.data.msg.info);
            }
          });
      } else {
        axios
          .post("/own/agent/notes/set", {
            user_id: this.itemnotename.id,
            own_notes: this.editnotenote
          })
          .then(response => {
            if (response.data.msg.code == 0) {
              this.$message({
                type: "success",
                message: "操作成功!"
              });
              this.isshowchangenotenote = false;
              this.getlist();
            } else {
              this.$message.error(response.data.msg.info);
            }
          });
      }
    },
    //复制功能
    copy: function(t) {
      console.log(t);
      t = t.toString();
      var that = this;
      this.$copyText(t).then(res => {
        that.$message.success("复制成功");
      });
    },
    //获取邀请链接
    getsharelink() {
      //获取当前链接

      axios.get("/own/reseller/check-code").then(response => {
        if (response.data.msg.code == 0) {
          console.log("当前链接");
          this.copyurl =
            window.origin +
            "/web/login?" +
            encodeURIComponent(response.data.data);
        } else {
          this.$message.error(response.data.msg.info);
        }
      });
    },
    //冻结提单
    coldbtn(row, type) {
      this.coldrow = row;
      this.coldtype = type;
      this.isshowcold = true;
    },
    surecold() {
      if (this.coldtype == 1) {
        //冻结
        axios
          .post("/own/user/freeze", {
            id: this.coldrow.id,
            freeze: "1"
          })
          .then(response => {
            if (response.data.msg.code == 0) {
              this.$message({
                type: "success",
                message: "操作成功!"
              });
              this.isshowcold = false;
              this.getlist();
            } else {
              this.$message.error(response.data.msg.info);
            }
          });
      }
      if (this.coldtype == 2) {
        //取消冻结
        axios
          .post("/own/user/freeze", {
            id: this.coldrow.id,
            freeze: "0"
          })
          .then(response => {
            if (response.data.msg.code == 0) {
              this.$message({
                type: "success",
                message: "操作成功!"
              });
              this.isshowcold = false;
              this.getlist();
            } else {
              this.$message.error(response.data.msg.info);
            }
          });
      }
    },
    //tab切换
    changestatus(val) {
      this.search.level = "";
      this.search.all = val;
      this.search.page = 1;
      this.search.name = "";
      this.search.mobile = "";
      this.getlist();
    },
    //切换种类
    changeradio() {
      console.log(this.typeradio);
      this.chouchengall.user_fee_type = this.typeradio;
    },
    changeradio2() {
      console.log(this.typeradio);
      this.yongjinall.commission_type = this.typeradio;
    },
    getinfo: function() {
      axios.get("/own/system/get").then(response => {
        if (response.data.msg.code == 0) {
          this.openswitch = response.data.data.level_open;
          this.is_qfx = response.data.data.is_qfx;
        } else {
          this.$message.error(response.data.msg.info);
        }
      });
    },
    //点击重置密码按钮
    resetCode(row) {
      console.log("row233", row);
      this.passwordId = row.id;
      this.resetcodeShow = true;

    },
    sureResetCode() {
      axios
        .post("/own/agent/password", { id: this.passwordId,password:this.password })
        .then(response => {
          console.log("666666", response);
          if (response.data.msg.code == 0) {
            this.$message({
              type: "success",
              message: "操作成功!"
            });
            this.resetcodeShow = false;
            this.getlist();
          } else {
            this.$message.error(response.data.msg.info);
          }
        });
    }
  },
  watch: {
    yongjinlog: {
      handler(newValue) {
        console.log("newValue", newValue);
        if (newValue) {
          this.upType = false;
        }
      }
    }
  }
};
</script>

<style scoped lang="less">
.tooltip_style {
  width: 20px;
  height: 20px;
  text-align: center;
  color: white;
  border-radius: 50%;
  line-height: 20px;
  background: #000000bf;
}
.accord_container {
  justify-content: space-evenly;
  display: flex;
  width: 450px;
}
.fenxiaoshang_container {
  align-items: center;
  display: flex;
  justify-content: space-between;
}
.t_over_text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: calc(100% - 40px);
}
.t_tab_box {
  display: flex;
}
.t_tab {
  width: 188px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  border-radius: 30px;
  color: white;
  font-size: 24px;
  margin-right: 28px;
}

.sxj {
  background: rgb(227, 232, 241);
  border-radius: 30px;
  font-size: 24px;
  text-align: center;
  font-weight: 500;
  color: rgb(175, 179, 188);
  width: 190px;
  height: 60px;
  margin-right: 30px;
}
.sxjact {
  background: rgb(0, 90, 255);
  border-radius: 30px;
  font-size: 24px;
  text-align: center;
  font-weight: 500;
  color: rgb(255, 255, 255);
  width: 190px;
  height: 60px;
  margin-right: 30px;
}

.sxjactsj {
  background: rgb(0, 90, 255);
  border-radius: 0.3rem;
  text-align: center;
  font-weight: 500;
  color: rgb(255, 255, 255);
  width: 3.3rem;
  height: 0.7rem;
}
.sxjsj {
  background: rgb(227, 232, 241);
  border-radius: 0.3rem;
  text-align: center;
  font-weight: 500;
  color: rgb(175, 179, 188);
  width: 3.3rem;
  height: 0.7rem;
}

.t_choose_tab_box {
  display: flex;
}
.t_tab_title {
  color: rgb(152, 155, 161);
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  font-weight: bold;
  font-size: 20px;
}
.t_tab_title_lei {
  color: #005aff;
  font-weight: bold;
  font-size: 24px;
}
.t_under_line {
  width: 30px;
  height: 2px;
  background-color: #f6f8fb;
  margin-top: 10px;
}
.t_under_line_lei {
  background-color: #005aff;
}
.chuantu_container{
  display: flex;
  margin-top: 50px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;

}
.footer_tabs{
  width: 100%;
position: fixed;
bottom: 0;
left: 0;
}
.tabs_container {
  display: flex;
  width: 100%;
  height: 44px;
  background: white;
  padding: 0 15px;
}
.wares {
  font-size: 20px;
  color: #020c1d;
  font-weight: bold;
  margin-top: 20px;
  font-family: "PingFang SC";
}
.initial {
  font-size: 17px;
  color: #afb3bc;
  margin-top: 20px;
}
.search_container {
  height: 72px;
  background: white;
  width: 100%;
  border-radius: 0 0 20px 20px;
  padding-right: 15px;
  padding-left: 15px;
  display: flex;
align-items: center;
}
.input_outer{
  width: 100%;
  height: 38px;
  display: flex;
  justify-content: space-between;
  padding: 0 2px;
  align-items: center;
  border: 1px solid #E3E8F1;
  border-radius: 20px;
  background: #F6F8FB;
  margin-top: 10px;
}
.name_input {
 width: 220px !important;
}
/deep/ .el-input__inner{

  height: 36px !important;
  border: 0 !important;
}
.addUpto{
  width: 70px;
  height: 30px;
  border-radius: 25px;
  color: #2757FF;
  background: #E8F2FF;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.search_For{
  width: 46px;
  height: 29px;
  color: white;
  background: #2757FF;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-radius: 25px;

}
.list_inner{
  width: 100%;
  background: white;
  border-radius:8px ;
  padding: 15px;
  margin-top: 10px;
}
.item_notes{
  width: 100%;
  display: flex;
  justify-items: center;
}
.name_inner{
  display: flex;
  width: 90%;
  align-items: center;
}
.level_val{
  background: #E8F2FF;
  color: #2757FF;
  line-height: 18px;
  font-size: 12px;
  border-radius: 5px;
  padding: 3px;
  font-size: 12px;
  margin: 0 6px;
}
.sign_val{
  background: #E8F2FF;
  color: #2757FF;
  line-height: 18px;
  font-size: 12px;
  border-radius: 5px;
  padding: 3px;
}
.money{
  display: flex;
  width: 50%;
  justify-content: space-between;
}
.mome{
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  font-size: 13px;
  width: 100%;

}
.ability{
  width: 32%;
  display: flex;
  justify-content: space-between;
  .remarks{
    width: 46px;
    height: 25px;
    border-radius: 20px;
    border: 1px solid #E3E8F1;
    color: #020C1D;
    text-align: center;
    line-height: 25px;
    background: #F7F8F9;
  }
  .stop{
    width: 46px;
    height: 25px;
    border-radius: 20px;
    border: 1px solid #E3E8F1;
    color: #020C1D;
    text-align: center;
    line-height: 25px;
    background: #F7F8F9;
  }

}
  .limit{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .note_textarea{
    margin: 20px 0;
  }
 /deep/ .note_textarea .el-textarea__inner {
    border: none !important;
    background: #F6F8FB;
    border-radius: 10px;
  }
  .operate{
    display: flex;
    justify-content: space-between;
    width: 100%;
    font-size: 14px;

    .cancellation{
      width: 45%;
      height: 40px;
      text-align: center;
      line-height: 40px;
      color: black;
      background: #E3E8F1;
      border-radius: 25px;
    }
    .besure{
      background: #005AFF;
       width: 45%;
      height: 40px;
      text-align: center;
      line-height: 40px;
      color: white;
      border-radius: 25px;
    }
  }
/deep/ .moneybox .el-input__inner{
  border: 1px solid #e3e8f1 !important;
  height: 45px !important;
}
</style>
<style>
.confirmContanienr{
  width: 300px;
}
</style>
